<div>
  <div class="mt-3">
    <d-data-table [dataSource]="tableData" [lazy]="true" [scrollable]="true" [fixHeader]="true"
      [tableOverflowType]="'auto'" [scrollable]="true" [resizeable]="true" [tableWidthConfig]="tableWidthConfig">
      <thead dTableHead>
        <tr dTableRow>
          <th dHeadCell>
            <span>操作</span>
          </th>
          <th dHeadCell *ngFor="let colOption of dataTableOptions.columns" [title]="colOption.header">
            {{colOption.header}}</th>
        </tr>
      </thead>
      <tbody dTableBody>
        <ng-template let-rowItem="rowItem" let-rowIndex="rowIndex">
          <tr dTableRow>
            <td dTableCell>
              <a class="devui-link-danger me-2" (click)="delete(rowIndex)">删除</a>
              <a class="devui-link" (click)="apart(rowIndex)">拆分</a>
            </td>
            <td dTableCell> <span dTooltip [content]="rowItem?.partNum">{{rowItem.partNum}}</span></td>
            <td dTableCell><span dTooltip [content]="rowItem?.partName">{{rowItem.partName}}</span></td>
            <td dTableCell><span dTooltip [content]="rowItem?.partType">{{rowItem.partType}}</span></td>
            <td dTableCell><span dTooltip [content]="rowItem?.Quantity">{{rowItem.Quantity}}</span></td>
            <td dTableCell><span dTooltip
                [content]="calculateEntryQuantitySum(this.data)">{{calculateEntryQuantitySum(this.data)}}</span></td>
            <td dTableCell>
              <div style="display: flex; justify-content: center;">
                <input style="width: 80%;" type="number" class="devui-form-control" [(ngModel)]="rowItem.quantity"
                  [ngModelOptions]="{standalone: true}" (change)="changeQuantity($event, rowIndex)"
                  [max]="rowItem.quantity" [min]="1" />
              </div>
            </td>
            <td dTableCell><span dTooltip [content]="rowItem?.partUOM">{{rowItem.partUOM}}</span></td>
            <td dTableCell>
              <div style="display: flex; justify-content: center;">
                <input style="width: 80%;" class="devui-form-control" [(ngModel)]="rowItem.warehouseName"
                  [ngModelOptions]="{standalone: true}" readonly (click)="SelectStorehouse(rowItem)"
                  placeholder="选择仓库" />
              </div>
            </td>
            <td dTableCell>
              <div style="display: flex; justify-content: center;">
                <input style="width: 80%;" class="devui-form-control" [(ngModel)]="rowItem.positionName"
                  [ngModelOptions]="{standalone: true}" (click)="selectPosition(rowItem)" readonly placeholder="选择仓位" />
              </div>
            </td>
            <td dTableCell>
              <div style="display: flex; justify-content: center;">
                <div style="width: 80%;">
                  <d-datepicker-pro [appendToBody]="true" [(ngModel)]="rowItem.warningDate"
                    [ngModelOptions]="{standalone: true}"></d-datepicker-pro>
                </div>
              </div>
            </td>
            <td dTableCell><span dTooltip [content]="rowItem?.note">{{rowItem.note}}</span></td>
            <td dTableCell><span dTooltip [content]="rowItem?.safetyInventory">{{rowItem.safetyInventory}}</span></td>
            <td dTableCell><span dTooltip [content]="rowItem?.minimumStock">{{rowItem.minimumStock}}</span></td>
            <td dTableCell><span dTooltip [content]="rowItem?.maximumStock">{{rowItem.maximumStock}}</span></td>
          </tr>
        </ng-template>
      </tbody>
    </d-data-table>
  </div>
  <div class="page-footer">
    <d-pagination [size]="'sm'" [canViewTotal]="true" [canChangePageSize]="true" [maxItems]="5"
      [total]="this.pager.total" [pageSizeOptions]="this.pageSizeOptions" [(pageSize)]="pager.pageSize"
      [(pageIndex)]="pager.pageIndex" (pageIndexChange)="pageIndexChange($event)"
      (pageSizeChange)="pageSizeChange($event)">
    </d-pagination>
  </div>
</div>
